<script setup>
import {onMounted, ref, reactive} from 'vue';
import {get, post} from '../js/http.js';
import { DbTypes } from '../js/common.js';

const isEdit = ref(false)
let connData = ref([])
let currentIndex = ref({})

onMounted(() => {
  getConn();
})

async function openModel(item, type) {
  isEdit.value = 'is-active'
  currentIndex.value = item
}
async function deleteHandle(item,itemIndex) {
  if(!item.id){
   return ;
  }
  post("/admin/conn/delete",item).then(res => {
    if (res.success) {
      window.message("保存成功", 'success')
      getConn();
      connData.value.splice(itemIndex,1);
    } else {
      window.message(res.message, 'warning')
    }
  }).catch(error => console.log(error))

}

function addHandle() {
  connData.value.push({connName: "NewConnection",})
  currentIndex.value = connData.value[connData.value.length-1]
  isEdit.value = 'is-active'
}


async function getConn() {

  get("/admin/conn/get").then(res => {
    connData.value = res.result;
  })
  .catch(error => console.log(error))
}
async function closeModel() {
  isEdit.value = ''

}
async function saveHandle() {
  isEdit.value = ''
  let res = await post("/admin/conn/update", currentIndex.value)
  if (res.success) {
    window.message("保存成功", 'success')
    getConn();
  } else {
    window.message(res.message, 'warning')
  }
}
</script>
<template>
  <div v-if="connData">
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>数据源</th>
        <th>类型</th>
        <th>连接数</th>
        <th>驱动</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,itemIndex) in  connData" :key="item.Name">
        <td>{{ item.connName }}</td>
        <td :title="item.connUrl">{{ item.connType }}</td>
        <td>1</td>
        <td>{{ item.connDriver}}</td>
        <td>{{ item.connUser }}</td>
        <td>{{ item.connPassword}}</td>
        <td><a @click="openModel(item,0)">设置</a>
          <a @click="deleteHandle(item,itemIndex)" class="ml-2">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div v-else>获取数据中</div>
  <div :class="['modal', isEdit]">
    <div class="modal-background"></div>
    <div class="modal-card" style="width:960px">
      <header class="modal-card-head">
        <p class="modal-card-title">数据源设置</p>
        <button class="delete" aria-label="close" @click="closeModel"></button>
      </header>
      <section class="modal-card-body">
        <!--索引设置 Begin-->
        <div v-if="currentIndex">
          <div class="field">
            <label class="label">数据源名称</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder=""
                     v-model="currentIndex.connName">
            </div>
            <span class="help is-success">名称只能是英文</span>
          </div>

          <div class="field">
            <label class="label">数据库类型</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <select v-model="currentIndex.connType">
                  <option>选择数据库</option>
                  <option v-for="(value,key) in DbTypes" :value="key">{{key}}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <label class="label">驱动</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <input class="input is-link" type="text" placeholder=""  v-model="currentIndex.connDriver">
              </div>
            </div>
            <span class="help is-success">例子：{{currentIndex.connType &&DbTypes[currentIndex.connType] ?DbTypes[currentIndex.connType].driver:''}}</span>
          </div>
          <div class="field">
            <label class="label">数据库连接</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentIndex.connUrl">
            </div>
            <span class="help is-success">例子：{{currentIndex.connType && DbTypes[currentIndex.connType] ?DbTypes[currentIndex.connType].connectionString:''}}</span>
          </div>
          <div class="field">
            <label class="label">用户名</label>
            <div class="control is-expanded">
              <div class="select is-fullwidth is-link">
                <input class="input is-link" type="text" placeholder="*" v-model="currentIndex.connUser">

              </div>
            </div>
          </div>
          <div class="field">
            <label class="label">密码</label>
            <div class="control">
              <input class="input is-link" type="text" placeholder="*" v-model="currentIndex.connPassword">
            </div>
          </div>
        </div>
        <!--索引设置 End-->
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button is-link" @click="saveHandle">保存</button>
        </div>
      </footer>
    </div>
  </div>

  <div class="container is-flex is-justify-content-center mt-5">
    <button class="button is-link ml-4" @click="addHandle">新增数据源</button>
  </div>

</template>
<style scoped>
</style>
